<!-- 发文（函）流转过程-->
<template>
  <view>
    <view class="padding-bottom">
      <van-cell class="color-blue" icon="sort" :title="dataList.docProcess.title" title-class="text-bold"/>
      <view class="process-container"  v-for="(item,index) in dataList.docProcess.data">
        <view class="process-left">
          <view>
            <image class="user-avatar" src="@/static/imgs/icon/icon-avatar.png"></image>
          </view>
          <view class="user-name">
            {{item.userName}}
          </view>
        </view>
        <view class="process-middle">
          <view class="text-black margin-bottom-sm">
            <view class="text-sm" v-text="'阅读时间：'+formatData(item.acceptTime)"></view>
          </view>
          <view class="text-black">
            <view class="text-sm" v-text="'处理时间：'+formatData(item.completeTime)"></view>
          </view>
        </view>
        <view class="process-right">
          <view class="text-xs color-blue"><i class="iconfont icon-dian color-blue" v-if="item.operation != null"/>{{item.operation}}</view>
        </view>
      </view>
    </view>
    <view class="padding-bottom" v-if="dataList.signProcess != undefined && dataList.signProcess.length > 0 ">
      <van-cell class="color-blue" icon="newspaper-o" :title="dataList.signProcess[0].name" title-class="text-bold"/>
      <view>
        <van-row justify="center">
          <van-col span="6"><van-cell title="接收单位" title-class="text-bold"></van-cell></van-col>
          <van-col span="6"><van-cell title="当前环节" title-class="text-bold"></van-cell></van-col>
          <van-col span="6"><van-cell title="当前状态" title-class="text-bold"></van-cell></van-col>
          <van-col span="6"><van-cell title="发起人" title-class="text-bold"></van-cell></van-col>
        </van-row>
        <!-- signProcess: {"code":200,"data":[{"data":[{"index":1,"userName":"李攀","userId":"3961","curUserName":null,"deptId":"002001005","deptName":"办公室","actDefName":"处室秘书","actDefId":"hb_hq_csms","state":"会签结束","acceptTime":"2021-11-03 17:11:02","completeTime":"2021-11-03 17:43:53","useTime":"0天0小时33分","remark":null,"proInstId":"156704c024ef4198a5c7d1176d4a8b9f","subProInstId":"537510da17c54265aa4542450df45449","parentActDefName":"处室会签","isFinishState":null,"sendUserId":"8419","sendUserName":"尹成伟","readTime":"2021-11-03 17:16:30","operation":"拟办意见，结束会签"}],"name":"处室会签"}],"message":null} -->
        <van-row justify="center" v-for="item in dataList.signProcess[0].data">
          <van-col span="6"><van-cell :title="item.deptName" @click='getListProInstIdOperationLogs(item.subProInstId)' title-class="text-blue"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.userName"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.state"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.sendUserName"></van-cell></van-col>
        </van-row>
        <!-- popup 子会签流程 -->
        <van-popup v-model:show="showSubSignList" closeable round position="bottom" :style="{height: '80%' }"
                   @click-close-icon="toClose" @click-overlay="toClose" get-container="body">
          <van-row >
            <van-col span="22">
              <van-cell :value="subSignData.title" />
            </van-col>
          </van-row>
          <view class="cu-list menu-avatar">
            <view class="process-container" v-for="(item,index) in subSignData.data">
              <view class="process-left">
                <view>
                  <image class="user-avatar" src="@/static/imgs/icon/icon-avatar.png"></image>
                </view>
                <view class="user-name">
                  {{item.userName}}
                </view>
              </view>
              <view class="process-middle">
                <view class="text-black margin-bottom-sm">
                  <view class="text-sm" v-text="'阅读时间：'+formatData(item.readTime)"></view>
                </view>
                <view class="text-black">
                  <view class="text-sm" v-text="'处理时间：'+formatData(item.completeTime)"></view>
                </view>
              </view>
              <view class="process-right">
                <view class="text-xs color-blue"><i class="iconfont icon-dian color-blue" v-if="item.operation != null"/>{{item.operation}}</view>
              </view>
            </view>
          </view>
          <!-- </van-row> -->
        </van-popup>
      </view>

    </view>


    <!-- <view class="padding-bottom">
      <van-cell icon="friends-o" title="传阅人员" title-class="text-bold"/>
      <view class="cu-list menu-avatar">
        <view class="cu-item" v-for="item in personList">
          <view class="cu-avatar round lg" style="font-size:30rpx;url();">
            {{item.name}}
          </view>
          <view class="content padding-left">
            <view class="text-black">
              <view class="text" v-text="item.unit"></view>
            </view>
            <view class="text-black">
              <view class="text" v-text="item.dept"></view>
            </view>
            </viw>
          </view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  props:{
    dataList:Object  //流转过程

  },
  data() {
    return {
      showSubSignList:false,//显示会签件子流程
      subSignData:{},//字会签件数据
      border: false,
      processList: []
    };
  },
  watch: {},
  methods: {
    //日期格式化，如果为null则用--代替
    formatData(data){
      if(data == null){
        return '--'
      }else{
        return data
      }
    },

    toClose() {
      this.showSubSignList  = false
    },
    //获取流转过程
    getListProInstIdOperationLogs(subProInstId){
      this.showSubSignList = true
      var _this = this
      this.$httploading({/// /caac/oa/mhjcomponent/processtrack/flowController/listoperationlogs
        url: this.$http.adornUrl(`/caac/oa/component/workflow/workflowController/listProInstIdOperationLogs`),
        method: 'post',
        params: this.$http.adornParams({
          'proInstId': subProInstId,
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag//固定值
        })
      }).then(({data}) => {
        if(data.code==200){
          this.subSignData = data.data
        }

      })
    },
  },
};
</script>

<style>
.color-blue{
  color: #0081ff;
}
.process-container{
  display: flex;
  flex-direction: row;
  margin: 20rpx 15rpx;
  background-color: #FFFFFF;
  border-radius: 15rpx;
  border: 1rpx solid #f2f3f5;
  align-items: center;
}
.process-left{
  display: flex;
  flex-direction: column;
  flex: 2;
  padding: 14rpx;
  border-right: 1rpx solid #f2f3f5;
  justify-content: center;
  align-items: center;

}
.user-name{
  padding: 8rpx;
  color: #333333;
  font-size: 20rpx;
}
.user-avatar{
  width: 80rpx;
  height: 80rpx;
}

.process-middle{
  flex: 6;
  display: flex;
  padding-left: 20rpx;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.process-right{
  flex: 3;
  display: flex;
  padding: 15rpx 10rpx;
  justify-content: flex-end;
  align-items: center;
}

</style>
